<template>
	<view style="padding-bottom:50rpx;">
		<page-head :title="'我的团队'" :headtype="2"></page-head>
		<view class="money" :style="{ top: statusheadheight + 'px' }">
			<view class="moneycard marginAuto" style="margin-top: 20rpx;">
				<image class="moneycardbg" :src="apifun.serveimg+'moneycardbg.png'" mode=""></image>
				<view class="moneycardmain flex">
					<view class="moneycardl">
						<view class="moneycardl-t flex">
							<view class="moneycardl-ticon">
								<image :src="apifun.serveimg + 'moneyicon.png'" mode=""></image>
							</view>
							<view class="moneycardl-ttitle">余额</view>
						</view>
						<view class="moneycardl-b flex">
							<view class="moneycardl-bmoney">{{ usermsg.money || 0 }}</view>
							<view class="moneycardl-bmx flex" @click="navigate('/pages/my/moenydetail')">
								<text>明细</text>
								<uv-icon name="arrow-right" size="14" color="#666666"></uv-icon>
							</view>
						</view>
					</view>
					<view class="moneycardbtn mainBg baiColor" @click="navigate('/pages/my/with')">提现</view>
				</view>
			</view>
		</view>
		<view class="available marginAuto">团队列表({{ total }})</view>
		<view class="team">
			<view class="teameach flex marginAuto" v-for="(item,index) in datas" :key="index">
				<view class="teameachimg">
					<image :src="apifun.URLimg+item.avatar" mode=""></image>
				</view>
				<view class="teameachmsg">
					<view class="msgname">{{ item.username }}</view>
					<view class="msgtime flex">
						<view class="msgtimetitle mainBg baiColor">注册时间</view>
						<view class="msgtimetime">{{ item.create_time }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				statusheadheight:uni.getStorageSync('ClientRectTop')+uni.getStorageSync('ClientRectHeight')+10,
				page:1,
				total:0,
				usermsg:{},
				datas:[]
			};
		},
		onLoad() {
			this.initData();
			this.getusermsgfun()
		},
		methods: {
			initData(){
				let sendData = {
					page:this.page,
					limit:this.apifun.limit
				};
				this.apifun.unirequest('/api/user/getMyTeamList','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.total = datas.total;
						if(datas.data.length <= 0){
							this.page--;
							return false
						};
						this.datas = [...this.datas,...datas.data];
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			getusermsgfun() {
				this.apifun.unirequest('/api/user/getUserInfo','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						uni.setStorageSync('token', datas.token)
						this.usermsg = datas;
						this.avatar = datas.avatar;
						uni.setStorageSync('usermsg',datas);
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.datas = [];
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
	};
</script>

<style scoped lang="scss">
	page{
		background: #F7F7F7;
	}
	.available{
		width: 690rpx;
		padding: 30rpx 0 0;
		line-height:50rpx;
		color:#222222;
		font-size: 36rpx;
	}
	.team{
		.teameach{
			width: 650rpx;
			padding: 20rpx;
			background: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			.teameachimg{
				width: 100rpx;
				height: 100rpx;
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
			.teameachmsg{
				margin-left: 14rpx;
				.msgname{
					font-size: 28rpx;
					color: #333333;
					line-height: 50rpx;
				}
				.msgtime{
					margin-top: 10rpx;
					height: 40rpx;
					line-height: 40rpx;
					.msgtimetitle{
						padding:0 12rpx;
						font-size: 22rpx;
						border-top-left-radius: 100rpx;
						border-bottom-left-radius: 100rpx;
					}
					.msgtimetime{
						padding:0 12rpx;
						font-size: 22rpx;
						color:#666666;
						background:#D4F1FF;
						border-top-right-radius: 100rpx;
						border-bottom-right-radius: 100rpx;
					}
				}
			}
		}
	}
	// 余额卡
	// card
	.money {
		position:sticky;
		z-index: 10;
		.moneytitle {
			padding: 10rpx 0;
			color: #222222;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 60rpx;
		}
	
		.moneycard {
			position: relative;
			width: 690rpx;
			height: 200rpx;
	
			.moneycardbg {
				position: absolute;
				z-index:40;
				width: 100%;
				height: 200rpx;
			}
	
			.moneycardmain {
				position: relative;
				z-index: 50;
				width: 630rpx;
				padding: 30rpx;
				justify-content: space-between;
	
				.moneycardl {
					.moneycardl-t {
						margin-top: 10rpx;
	
						.moneycardl-ticon {
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
	
							image {
								width: 50rpx;
								height: 50rpx;
							}
						}
	
						.moneycardl-ttitle {
							font-size: 30rpx;
							color: #222222;
							line-height: 50rpx;
							font-weight: 600;
						}
					}
	
					.moneycardl-b {
						margin-top: 20rpx;
	
						.moneycardl-bmoney {
							font-size: 50rpx;
							color: #222222;
							margin-right: 40rpx;
							line-height: 70rpx;
						}
	
						.moneycardl-bmx {
							font-size: 24rpx;
							color: #666666;
							line-height:75rpx;
						}
					}
				}
	
				.moneycardbtn {
					width: 150rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					border-radius: 100rpx;
					font-size: 30rpx;
					margin-top: 40rpx;
				}
			}
		}
	}
</style>